<template>
	<div :style='{ height: parentHeight, overflow: "hidden" }'>
		<!-- 顶部搜索栏 -->
		<Search @get-height='handleGetHeight' />
		<!-- 轮播图 -->
		<swiper indicator-dots="true">
			<swiper-item :key='item.goods_id' v-for='item in swiperData'>
				<image :src='item.image_src' />
			</swiper-item>
		</swiper>
		<!-- 导航菜单 -->
		<view class="navs">
			<navigator url="" :key='index' v-for='(item, index) in menuData'>
				<image :src='item.image_src' />
			</navigator>
		</view>
		<!-- 商品楼层 -->
		<view class="floors">
			<view class="floor" :key='index' v-for='(item, index) in floorData'>
				<!-- 标题 -->
				<view class="title">
					<image :src='item.floor_title.image_src' />
				</view>
				<!-- 条目 -->
				<view class="items">
					<navigator url='' :key='index' v-for='(item, index) in item.product_list'>
						<image :src="item.image_src"></image>
					</navigator>

				</view>
			</view>
		</view>
		<!-- // 功能实现 -->
		<view class="goTop icon-top" v-if="scrollTop > 200" @click="goTop"></view>
	</div>
</template>

<script>
import Search from '../../components/search/index.vue'
import {Banner,loadMenuData,loadfloorData} from '@/api/logo.js'; // 引入api
export default {
	data() {
		return {
			title: '主页',
			parentHeight: 'atuo',
			swiperData: [],
			menuData: [],
			floorData: [],
			scrollTop: 0
		}
	},
	onLoad() {
		this.loadSwiperData()
		this.loadMenuData()
		this.loadfloorData()
	},
	methods: {
		// 监听页面的滚动
		onPageScroll(ev) {
			this.scrollTop = ev.scrollTop;
		},
		goTop() {
			// 调用 API 可以设置页面的滚动位置
			uni.pageScrollTo({ scrollTop: 0 });
		},
		handleGetHeight(height) {
			// 设置父容器高度
			this.parentHeight = height + 'px'
		},
		// 获取轮播图
		async loadSwiperData() {
			const res = await Banner()
			// console.log('sssss',res.message);
			if (res.meta.status === 200) {
				this.swiperData = res.message
			} else {
				uni.showToast(res.meta.msg)
			}
			// uni.request({
			// 	url: 'https://uinav.com/api/public/v1/home/swiperdata',
			// 	success: (res) => {
			// 		if (res.data.meta.status === 200) {
			// 			this.swiperData = res.data.message
			// 		} else {
			// 			uni.showToast(res.data.meta.msg)
			// 		}
			// 	}
			// })
		},
		// 获取菜单
		async loadMenuData() {
			const res = await loadMenuData()
			// console.log('sssss',res.message);
			if (res.meta.status === 200) {
				this.menuData = res.message
			} else {
				uni.showToast(res.meta.msg)
			}
			// uni.request({
			// 	url: 'https://uinav.com/api/public/v1/home/catitems',
			// 	success: (res) => {
			// 		if (res.data.meta.status === 200) {
			// 			this.menuData = res.data.message
			// 		} else {
			// 			uni.showToast(res.data.meta.msg)
			// 		}
			// 	}
			// })
		},
		// 获取楼层
		async loadfloorData() {

			const res = await loadfloorData()
			// console.log('sssss',res.message);
			if (res.meta.status === 200) {
				this.floorData = res.message
			} else {
				uni.showToast(res.meta.msg)
			}
			// uni.request({
			// 	url: 'https://uinav.com/api/public/v1/home/floordata',
			// 	success: (res) => {
			// 		if (res.data.meta.status === 200) {
			// 			this.floorData = res.data.message
			// 			console.log('====================================');
			// 			console.log(res);
			// 			console.log('====================================');
			// 		} else {
			// 			uni.showToast(res.data.meta.msg)
			// 		}
			// 	}
			// })
		}
	},
	components: {
		Search
	}
}
</script>

<style lang='less'>
swiper {
	width: 750rpx;
	height: 340rpx;
	margin-top: 10rpx;

	image {
		width: 750rpx;
		height: 340rpx;
	}
}

.navs {
	display: flex;
	padding: 24rpx;

	navigator {
		flex: 1;
		width: 128rpx;
		height: 140rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
}

// 楼层商品
.floor {
	.title {
		width: 750rpx;
		height: 60rpx;
		padding: 20rpx 0 0 10rpx;
		background-color: #f4f4f4;

		image {
			width: 750rpx;
			height: 60rpx;
		}
	}

	.items {
		padding: 20rpx 16rpx;
		overflow: hidden;

		navigator {
			float: left;
			margin-left: 10rpx;

			&:first-child {
				width: 232rpx;
				height: 386rpx;
				margin-left: 0;

				image {
					width: 232rpx;
					height: 386rpx;
				}
			}

			&:nth-child(2),
			&:nth-child(5) {
				width: 273rpx;
				height: 188rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&:nth-child(3),
			&:nth-child(4) {
				width: 193rpx;
				height: 188rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&:nth-last-child(-n + 2) {
				margin-top: 10rpx;
			}
		}
	}

	&:first-child {
		.items {
			navigator {
				width: 232rpx;
				height: 188rpx;

				&:first-child {
					width: 232rpx;
					height: 386rpx;

				}
			}
		}
	}
}

.goTop {
	position: fixed;
	bottom: 30rpx;
	right: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100rpx;
	height: 100rpx;
	font-size: 48rpx;
	color: #666;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.8);
}
</style>
